<template>
  <div class="success-box">
    <div class="success">
      <i class="iconfont iconxuanze"></i><br />
      <span class="text">支付成功</span><br />
      <span>￥<md-amount :value="money" has-separator></md-amount></span><br />
      <div class="btn-wrapper">
        <md-button
          type="default"
          plain
          round
          inline
          class="btn"
          @click="$commonJs.goPage('home')"
          >回到首页</md-button
        >
        <md-button
          type="default"
          round
          inline
          @click="$commonJs.goPage('order')"
          >查看订单</md-button
        >
      </div>
    </div>
    <div class="like">
      <span>猜你喜欢</span>
    </div>
  </div>
</template>

<script>
import { Amount, Button } from "mand-mobile";
export default {
  name: "index",
  components: {
    [Amount.name]: Amount,
    [Button.name]: Button
  },
  data() {
    return {
      money: 520
    };
  }
};
</script>

<style scoped lang="stylus">
.success{
  padding 24px 0
  text-align center
  font-size:24px;
  font-family:PingFang-SC-Regular;
  font-weight:400;
  color:rgba(0,0,0,1);
  .text{
    font-size:36px;
    font-family:PingFang-SC-Regular;
    font-weight:400;
    color:rgba(0,0,0,1);
    line-height 82px
  }
  .btn-wrapper{
    margin-top 36px
    margin-bottom 35px
  }
  .btn{
    margin-right: 44px
  }
  .iconfont{
    font-size 84px
    color color-primary
  }
}
  .like{
    text-align center
    font-size:24px;
    font-family:PingFang-SC-Regular;
    font-weight:400;
    color:rgba(102,102,102,1);
  }
</style>
